<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/tabs.css">
    <link rel="stylesheet" href="./css/slider.css">
    <link rel="stylesheet" href="./css/component.css">
</head>

<body>
    <button id='btn'>设置</button>
    <div id="counter"></div>
    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="./js/dialog.js"></script>
    <script src="./js/tabs.js"></script>
    <script src="./js/slider.js"></script>
    <script src="./js/counter.js"></script>
    <script>
        $(function() {

            //  最大值设定在隐藏域id:item-max的value上
            var dialogHtml = '\
<div class="jyTable popTime">\
    <input type="hidden" value="1000" id="item-max">\
    <div class="clearfix">\
        <ul class="title title1 left">\
            <li class="cur">tab1</li>\
            <li>tab2</li>\
        </ul>\
    </div>\
    <div class="zong">\
        <div class="list list1">\
            <div class="tabCon">\
                <ul class="wayUl" >\
                    <li>预设总访客量<i class="t-c-r"></i>：<span id="maxIP">5000</span><span class="t-c-r-n"></span></li>\
                    <li>已分配访客量<i class="t-c-r"></i>：<span id="usedIP">1000</span><span class="t-c-r-n"></span></li>\
                    <li>未分配访客量<i class="t-c-r"></i>：<span id="restIP">0</span><span class="t-c-r-n"></span></li>\
                    <a style=" float: right" class="dBtn borderBtn whiteBtn" id="planReset" href="#">恢复默认值</a>\
                    <a style="margin-right: 20px; float: right" class="dBtn borderBtn whiteBtn" id="plan07Reset" href="#">0至7点无流量</a>\
                </ul >\
                <div class="clearfix">\
                    <div style="float: left;"><div>访客量</div><div style="margin-top: 218px;">时间点</div></div>\
                    <div style="float: right; width:93%" id="counter-wrapper"></div>\
                </div>\
                <ol class="tipTxt1">\
                    <p class="tipP">说明:</p>\
                    <li>默认的流量时间曲线，符合大多数中国互联网用户的实际使用情况。</li>\
                    <li class="text-danger">启用流量时间控制，可能会降低下发量，使店铺或商品统计到的总量达不到预设的总量，流量宝不受理此类申诉及退点申请，请酌情使用。</li>\
                    <li>流量控制拉杆的上限不能超过红线位置。控制杆拉到最低代表这个时间段没流量。</li>\
                    <li class="text-danger">请注意，80000访客量以上的任务，流量控制功能将无效。</li>\
                </ol>\
            </div>\
            <div class="tabCon">\
                    <ol style="padding-top: 10px;" class="gray">\
                        <li style="margin-bottom: 14px">开启高速流量模式，系统将在最短时间(预计1-6小时以内)，优化完成计划访客量，同时收取增值服务费。</li>\
                        <li style="margin-bottom: 14px;">开启此功能将收取附加费用，附加费用为基础流量费的50%。</li>\
                    </ol>\
                    <div class="extra">附加费用：<span class="text-danger" role="fastCurvePriceInfo">1.00点 x 50% = 0.50点/天</span></div>\
            </div>\
        </div >\
    </div >\
</div > ';
            $("#btn").on("click", function() {
                var counter;
                $.Pop(dialogHtml, {
                    Title: "流量时间设置",
                    BoxDrag: false,
                    callback: function() {
                        $(".jyTable").createTab();
                        var screen = $("#counter-wrapper");
                        var maxIP = $("#maxIP"),
                            usedIP = $("#usedIP"),
                            restIP = $("#restIP"),
                            maxNum = maxIP.text();
                        counter = new Counter(maxNum, function(num) {
                            restIP.html(num);
                            usedIP.html(maxNum - num);
                        }, [9, 23, 32, 32, 32, 3, 4, 3, 53, 45, 43, 56, 36, 54, 6, 54, 65, 3, 6], $("#item-max").val());
                        counter.render(screen);
                        $("#plan07Reset").on("click", function() {
                            counter.resetVal([89, 3, 5, 65, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
                        });
                    },
                    Btn: {
                        yes: {
                            vla: "保存",
                            class: "dBtn bacBtn greenBtn",
                            ope: function(close, e) {
                                console.log(counter.getVal(), "val");
                                close();
                            }
                        },
                        no: {
                            vla: "取消",
                            class: "dBtn delBtn grayBtn",
                            ope: function(close, e) {
                                close();
                            }
                        }
                    }
                }, function() {
                    alert('点击确定的回调')
                })
            });
        });
    </script>
</body>

</html>